<template>
  <u-dialog v-model="display_"
            :title="$t('officialSongList.title')"
            type="none">
    <div class="relative-position" style="min-height: 128px">
      <div v-show="officialSongList && officialSongList.length > 0">
        <q-input class="q-mb-md" v-model="officialSongSearchKey"/>
        <div class="row q-col-gutter-md">
          <div class="col-xs-12"
               v-for="item in officialSongListDisplay"
               :key="`${getFirstNotNull(item.artist)}_${getFirstNotNull(item.title)}`">
            <song-card :title="getFirstNotNull(item.title, langIndex)"
                       :artist="getFirstNotNull(item.artist, langIndex)"
                       :diffs="item.difficulty"
                       :cover="item.cover"
                       @click="onLoadEvent(item.id)"/>
          </div>
        </div>
      </div>
      <q-inner-loading :showing="loading">
        <div class="row q-col-gutter-md">
          <q-spinner-cube size="md" class="col-auto"/>
          <div class="col-auto">{{ $t('officialSongList.loading') }}</div>
        </div>
      </q-inner-loading>
    </div>
  </u-dialog>
</template>

<script>
  import UDialog from "src/components/public/UDialog";
  import * as bestdori from "src/lib/bestdoriAPI";
  import {readPlayerOptions} from "src/lib/playerOptionUtil";
  import { debounce } from 'quasar';
  import SongCard from "../../components/player/SongCard";

  export default {
    name: "OfficialList",
    components: {SongCard, UDialog},
    props: {
      display: {
        type: Boolean,
        default: false
      }
    },
    data: function () {
      return {
        display_: this.display,
        loading: false,
        officialSongList: [],
        officialSongListDisplay: [],
        officialSongSearchKey: ''
      };
    },
    computed: {
      langIndex() {
        let option = readPlayerOptions();
        let lang = option.language;
        if (lang.toLowerCase().includes('en_')) return 1;
        else if (lang.toLowerCase() === 'zh_tw') return 2;
        else if (lang.toLowerCase().includes('zh_')) return 3;
        else if (lang.toLowerCase().includes('ko_')) return 4;
        else return 0;
      }
    },
    watch: {
      officialSongList() {
        this.officialSongListDisplay = this.officialSongList;
      },
      officialSongSearchKey() {
        this.officialSongSearch(this.officialSongSearchKey, this.officialSongList)
      },
      display(n) {
        this.display_ = n;
      },
      async display_(n) {
        this.$emit('onDisplayChange', n)
        if(n) {
          this.loading = true;
          this.officialSongList = await bestdori.getOfficialSongList();
          this.loading = false;
        }
      }
    },
    model: {
      prop: 'display',
      event: 'onDisplayChange'
    },
    methods: {
      officialSongSearch(key, list) {
        this.loading = true;
        try {
          if (!key || key === '' || !list || list.length === 0) {
            this.officialSongListDisplay = list;
            return;
          }
          let keys = key.split(' ');
          let newList = [];
          keys.forEach(i => {
            list.forEach(item => {
              if (item.id.toString().includes(i) || this.isStringInArray(i, item.title) || this.isStringInArray(i, item.artist)) {
                newList.push(item);
              }
            })
          })
          this.officialSongListDisplay = newList;
        } catch(e) {
          this.officialSongListDisplay = list;
        } finally {
          this.loading = false;
        }
        this.loading = false;
      },
      isStringInArray(str, array) {
        if (!str || !array) return false;
        for (let i in array) {
          if (array[i] && array[i].toLowerCase().includes(str.toLowerCase())) return true;
        }
        return false;
      },
      getFirstNotNull(arr, preferIndex) {
        if (preferIndex && arr[preferIndex]) return arr[preferIndex];
        for (let i in arr) if (arr[i] != null) return arr[i];
        return arr[0];
      },
      onLoadEvent(id) {
        this.$root.$emit('loadByOfficialSongList', id);
        this.display_ = false;
      }
    },
    async mounted() {
      this.officialSongSearch = debounce(this.officialSongSearch, 1000);
    }
  }
</script>

<style scoped>

</style>
